<template>
  <div class="maincontain">
    <div class="head">
      <div class="left">
        <span>区域搜索:</span>
           <el-select v-model="regionId" placeholder="请选择"  :clearable= true  >
    <el-option
      v-for="item in AreaList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
     
      >
    </el-option>
  </el-select>
      </div>
      <div class="left">
        <span>点位搜索:</span>
        <el-input  placeholder="请输入内容" v-model="quyuContent"></el-input>
      </div>
      <div class="button">
         <el-button type="primary" icon="el-icon-search"  @click="searchArea">查询</el-button>
      </div>
    </div>
    <div class="body">
      <div class="top">
        <el-button type="primary" icon="el-icon-zoom-in" @click="xinjian(1)" >新建</el-button>
    
      </div>
      <div class="contain">
        
          <el-table
    :data="list"
    stripe
    style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="点位名称"
     >
    </el-table-column>
    <el-table-column
      prop="region.name"
      label="所在区域">
    </el-table-column>
    <el-table-column
      prop="businessType.name"
      label="商圈类型">
    </el-table-column>
     <el-table-column
      prop="ownerName"
      label="合作商">
    </el-table-column>
     <el-table-column
      prop="addr"
      label="详细地址">
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作">
       <template slot-scope="scope">
        <el-button @click="chakan(scope.row)" type="text" size="small">查看详情</el-button>
          <el-button @click="edmit(scope.row,0)" type="text" size="small">修改</el-button>
                   <el-popconfirm
  title="亲亲您确定要删除嘛~~~"
  @cancel="cancel"
  @confirm="dele(scope.row)"
>
 <el-button type="text" size="small"  slot="reference" class="shanshan">删除</el-button>

</el-popconfirm>
            
      </template>

    </el-table-column>
  </el-table>





          <div class="foot" v-if="isshow">

              <span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span>
                <el-button type="info"  @click="nextPage" :disabled = istrue>下一页</el-button>
                 <el-button type="info"  @click="beforePage" :disabled = istrue2>上一页</el-button>
          </div>
      </div>
    </div>
   <!-- 模态框 新增区域 -->
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-dialog
 :title="this.type? '新增区域':'修改区域'"
  :visible.sync="Visible"
  width="35%"
  >
   
 <el-form-item label="点位名称:" prop="name">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.name"
  maxlength="15"
  show-word-limit
/>
  </el-form-item>
 <el-form-item label="所在区域:" prop="regionId">
         <el-select v-model="ruleForm.regionId" placeholder="请选择"  :clearable= true  >
    <el-option
      v-for="item in AreaList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
     
      >
    </el-option>
  </el-select>
  </el-form-item>

<el-form-item label="所属商圈:" prop="businessId">
         <el-select v-model="ruleForm.businessId" placeholder="请选择"  :clearable= true  >
    <el-option
      v-for="item in bussinessList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
     
      >
    </el-option>
  </el-select>
  </el-form-item>


<el-form-item label="归属合作商:" prop="ownerName">
         <el-select v-model="ruleForm.ownerName" placeholder="请选择"  :clearable= true  >
    <el-option
      v-for="item in hezuo"
      :key="item.value"
      :label="item.label"
      :value="item.label"
     
      >
    </el-option>
  </el-select>
  </el-form-item>





<el-form-item label="详细地址:" prop="addr">
 <el-cascader :options="options" clearable v-model="ruleForm.addr"></el-cascader>

  </el-form-item>



<el-form-item  prop="xiangxi">
    <el-input
  type="textarea"
  placeholder="请输入详细地址"
  v-model="ruleForm.xiangxi"
  maxlength="60"
  show-word-limit
  :autosize= area
>
</el-input>
  </el-form-item>





  <span slot="footer" class="dialog-footer">
    <el-button @click= cancel>取 消</el-button>
    <el-button type="primary" @click="addquyu">确 定</el-button>
  </span>
</el-dialog>
</el-form>
<!-- 模态框 查看详情 -->
     <el-dialog
  title="提示"
  :visible.sync="DetailVisible"
  width="30%"
  center>
   <!-- 表格部分 -->
     <el-table
      :data="AreaList"
      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="innerCode"
        label="机器编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="vmStatus"
        label="设备状态"
        width="120">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="最后一次供货时间">
      </el-table-column>
    </el-table>
  <span slot="footer" class="dialog-footer">
  </span>
</el-dialog>


  </div>
</template>

<script>
import {gdDetails,gdType,gdxiang,gdcancel} from '@/api/auth'
import addressOptions from '@/utils/city'
import {PointSearch1,addPoint,deldianwei,guanliPoint,PointEdmit,PointXiangqing,PointSearch,bussiness} from '@/api/quyu'
export default {
 async created(){
  // console.log(addressOptions);
  const res1 = await bussiness()
  console.log(res1);
  res1.forEach((item,index) =>this. bussinessList.push({
     label:item.name,
     value:item.id,  
  }))
  
  this.options = addressOptions
  console.log(this.options);
   const res = await PointSearch(this.pageIndex)
   console.log(res.currentPageRecords);
     res.currentPageRecords.forEach((item,index) =>this.hezuo.push({
     label:item.ownerName,
     value:index,  
  }))
  console.log(this.hezuo);
   this.list = res.currentPageRecords
   this.list.forEach((item,index)=>this.AreaList.push({
          label:item.region.name,
          value:item.regionId

   }))
   console.log(this.AreaList);
   this.strList =  res.currentPageRecords.map(item=>{
     return  item.addr.substring(12);
   })
  //  console.log(this.strList);
   console.log(this.list);
   this.list.forEach((item,index)=>{
      // console.log(item['addr']);
      // console.log(index)
     item['addr'] = this.strList[index]

   })
   console.log(this.list);
   this.list = res.currentPageRecords
   this.loading = false
 console.log(this.list);
 this.pageIndex =res.pageIndex
this.totalCount = res.totalCount
this.totalPage = res.totalPage
if(this.pageIndex === '1') {
   this.disabled = true
} 

  },

  data() {
    return {
        options: [],
        value:'',
        edmitList:[],
        xiangxi:'',
        value1: '',
       value2: '',
         value3: '',
      list:[],
      strList:[],
      hezuo:[],
      type:0,
      regionId:'',
      AreaList: [],
      bussinessList:[],
      isshow:true,
      totalCount:'',
      quyuContent:'',
      istrue:false,
      istrue2:false,
      pageIndex:1,
      pageSize:10,
      totalPage:'',
      DetailVisible:false,
      Areadetail:{
         regionId:'',
         pageIndex:'',
         pageSize:''
      },
      Visible:false,
      text:'',
      area:{
      minRows: 4
      },
       id:'',
       name1:'',
      ruleForm:{
        name:'',
        businessId:'',
        createUserId:1,
        ownerId:'',
        areaCode:'110100',
        regionId:'',
        addr:[],
        ownerName:'',
        xiangxi:''
      },
      rules:{
        name:[
          {required:true,message:'请输入点位名称',trigger:'blur'}
        ],
       addr:[
         {required:true,message:'请选择',trigger:'blur'}
       ],
       regionId:[
         {required:true,message:'请选择',trigger:'blur'}
       ],
       businessId:[
         {required:true,message:'请选择',trigger:'blur'}
       ],
       ownerName:[
         {required:true,message:'请选择',trigger:'blur'}
       ]
      }
    }
  }, 
  methods:{
       handleChange(value) {
        console.log(value);
      },
    async chakan(row){
      console.log(row);
      this.name1 = row.name
       this.DetailVisible = true
       const res = await PointXiangqing(row.id)
   const newRes =   res.map(item=> {
        return item.updateTime.replaceAll('-','.').replaceAll('T',' ')
      })
       console.log(res);
       console.log(newRes);
        res.forEach((item,index)=>{
          item.updateTime = newRes[index]
        })
        console.log(res);
        res.forEach(item=>{
           if(item.vmStatus){
            item.vmStatus = '运营'
           }else {
              item.vmStatus = '未投放'
           }
        })
       this.AreaList = res
       
     },
    async dele(row){
      try {
            console.log(1);
      this.delvisible = true
     console.log(row);
     const res =await  deldianwei(row.id)
     console.log(res);
       const res1 = await PointSearch(this.pageIndex)
       this.list = res1.currentPageRecords
       this.$message.success('删除成了哦~~')
      }catch(err){
        console.log(err);
        this.$message.error(err.response.data)
      }
    
     },
     cancel(){
         this.ruleForm ={
        name:'',
        businessId:'',
        createUserId:1,
        ownerId:'',
        areaCode:'110100',
        regionId:'',
        addr:'',
        ownerName:''
      }
      this.xiangxi = ''
      this.$refs.ruleForm.resetFields()
      this.Visible = false
     },
    async edmit(row,type){
      const res = await guanliPoint(this.pageIndex,this.pageSize)
      console.log(res)
       console.log(row,type);
       this.type = type
      this.Visible= true
      this.ruleForm.addr = ['北京市','市辖区','昌平区']
      this.ruleForm.name = row.name
      this.ruleForm.regionId = row.region.name
      this.ruleForm.businessId = row.businessType.name
       this.ruleForm.ownerName = row.ownerName
      this.ruleForm.xiangxi =  row.addr
       console.log( this.ruleForm.addr);
      this.id = row.id
      this.name1 = row.name
      console.log(this.id);
    
     },
    xinjian(type){
      this.type = type
      this.Visible= true
      console.log(this.list);
    },
  async addquyu(){
  //   if(this.type){
  //        try {
  //         console.log(this.ruleForm);
  //         this.ruleForm.regionId
  //  await this.$refs.ruleForm.validate()
  //  await addArea(this.ruleForm)
  //  this.$message.success('恭喜你添加成功!')
  //  this.Visible = false
  //  const res = await quyuList(this.pageIndex)
  //   this.list = res.currentPageRecords
  //   this.$refs.ruleForm.resetFields()
  //   }catch(err){
  //     console.log(1);
  //     console.log(err);
  //     if(err.response.data ==='已存在此名称的对象'){
  //       console.log(err.response.data);
  //     this.$message.error(err.response.data)
  //     }
  //   }
  //   }else {
  //       if(this.ruleForm.regionName === this.name) {
  //        this.$message.error('区域名称已存在')
  //        return
  //     }
  //     await edmitArea(this.id,this.ruleForm)
  //     const res = await quyuList(this.pageIndex)
  //     this.list = res.currentPageRecords
  //      this.Visible = false
  //      this.$message.success('恭喜您编辑成功~~')
  //      this.ruleForm ={
  //       regionName:'',
  //       remark:'',
  //     }
  //     this.$refs.ruleForm.resetFields()
       
  //   }
  if(this.type){
    try{
       await this.$refs.ruleForm.validate()
      const res = await PointSearch(this.pageIndex)
    //  console.log(res);
       console.log(res.currentPageRecords);
   const a=  res.currentPageRecords.find(item=> item.ownerName === this.ruleForm.ownerName)
   console.log(a);
   this.ruleForm.ownerId = a.ownerId
   this.ruleForm.addr.push(this.ruleForm.xiangxi)
  this.ruleForm.addr =  this.ruleForm.addr.join('-')
   console.log(this.ruleForm.addr);
    console.log(this.ruleForm);
    const res1 = await addPoint(this.ruleForm)
    console.log(res1);
       this.$message.success('恭喜你添加成功!')
        this.$refs.ruleForm.resetFields()
        this.xiangxi = ''
         this.Visible = false
    }catch(err){
      console.log(err);
    }
    }
    /* 编辑功能的确定 */
    else {
           try{
            console.log(this.ruleForm);
       await this.$refs.ruleForm.validate()
      const res = await PointSearch(this.pageIndex)
    //  console.log(res);
       console.log(res.currentPageRecords);
   const a=  res.currentPageRecords.find(item=> item.ownerName === this.ruleForm.ownerName)
   console.log(a);
   this.ruleForm.ownerId = a.ownerId
   this.ruleForm.addr.push(this.ruleForm.xiangxi)
  this.ruleForm.addr =  this.ruleForm.addr.join('-')
   console.log(this.ruleForm.addr);
    console.log(this.ruleForm);
    const res1 = await PointEdmit(this.id,this.ruleForm)
    console.log(res1);
       this.$message.success('恭喜你编辑成功!')
        this.$refs.ruleForm.resetFields()
        this.xiangxi = ''
         this.Visible = false
    }catch(err){
      console.log(err);
    }
    }
  },
  
   async nextPage(){
    if(this.pageIndex == this.totalPage) return
    this.pageIndex++
    console.log(this.pageIndex);
    const res =  await PointSearch(this.pageIndex)

    this.list = res.currentPageRecords
   this.list.forEach((item,index)=>this.AreaList.push({
          label:item.region.name,
         

   }))
   console.log(this.AreaList);
   this.strList =  res.currentPageRecords.map(item=>{
     return  item.addr.substring(12);
   })
  //  console.log(this.strList);
   console.log(this.list);
   this.list.forEach((item,index)=>{
      // console.log(item['addr']);
      // console.log(index)
     item['addr'] = this.strList[index]

   })
   console.log(this.list);
   this.list = res.currentPageRecords
   this.loading = false
 console.log(this.list);
 this.pageIndex =res.pageIndex
this.totalCount = res.totalCount
this.totalPage = res.totalPage
if(this.pageIndex === '1') {
   this.disabled = true
} 
   
    },
  async  beforePage(){
    if(this.pageIndex ==1) return
      this.pageIndex--
       const res =  await PointSearch(this.pageIndex)
       this.list = res.currentPageRecords
          this.list = res.currentPageRecords
   this.list.forEach((item,index)=>this.AreaList.push({
          label:item.region.name,
         

   }))
   console.log(this.AreaList);
   this.strList =  res.currentPageRecords.map(item=>{
     return  item.addr.substring(12);
   })
  //  console.log(this.strList);
   console.log(this.list);
   this.list.forEach((item,index)=>{
      // console.log(item['addr']);
      // console.log(index)
     item['addr'] = this.strList[index]

   })
   console.log(this.list);
   this.list = res.currentPageRecords
   this.loading = false
 console.log(this.list);
 this.pageIndex =res.pageIndex
this.totalCount = res.totalCount
this.totalPage = res.totalPage
if(this.pageIndex === '1') {
   this.disabled = true
} 
       this.Visible = false
    },
   async searchArea(){
    console.log(this.regionId);
    console.log(this.quyuContent);
    if(this.quyuContent ===undefined) {
           const res = await PointSearch1(this.pageIndex,this.regionId)
    console.log(res);
    this.list = res.currentPageRecords
    } else if(this.regionId ===undefined) {
          const res = await PointSearch1(this.pageIndex,this.quyuContent)
           this.list = res.currentPageRecords
           this.pageIndex =res.pageIndex
   this.totalCount = res.totalCount
   this.totalPage = res.totalPage
           
    } else {
        const res = await PointSearch1(this.pageIndex,this.regionId,this.quyuContent)
           this.list = res.currentPageRecords
           this.pageIndex =res.pageIndex
   this.totalCount = res.totalCount
   this.totalPage = res.totalPage
    }
    
      // console.log(this.list);
      // this.pageIndex = res.pageIndex
      // this.pageSize = res.pageSize
      // this.totalCount =  res.totalCount
      // this.totalPage = res.totalPage
      // if(this.list.length ===0) {
      //   this.isshow = false
      // }else this.isshow = true
    }
  }
}
</script>

<style lang="scss" scpoed>
.head {
    display: flex;
    height: 60px;
    background-color: #ffffff;
    line-height: 60px;
    width: 100%;
    margin-bottom: 20px;
    .button {
      height: 60px;
      width: 80px;

    }
    .right {
      display: flex;
      margin-right: 5px;
      width: 320px;
      height: 60px;
    }
    .right span {
      width: 100px;
    }
    .left {
      margin-right: 8px;
      margin-left: 20px;
      display: flex;
      width: 500px;
      height: 60px;
      .el-select{
         .el-input {
           width: 100%;
        }
        .el-input__suffix{
          right: -20px;
        }
      }
      .el-input{
        width: 50%;
      }
      span {
        width: 100px;
      }
    }
  }
 ::v-deep .maincontain {
  position: absolute;
  background-color: pink;
  top: 80px;
  left: 150px;
  width: 90%;
  height: 1000px;
  
  
  .body {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    background-color: #ffffff;
    .top {
      padding-left: 15px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      background-color:#ffffff;
      .el-button--primary {
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        border: none;
        text-align: center;
      }
      .el-button--warning{
        background-color: #fbf4f0;
        color: #6b635e;
        border: none;
      }
   
      
    }
  }
}
 



     ::v-deep .el-table__header{
  background-color: green;
} 
.foot{
  padding-left: 40px;
  padding-right: 40px;
   height: 100px;
   line-height: 100px;
   width: 100%;
   background-color: #ffffff;
   span {
    color: #dbe5ef;
   }
   .el-button--info {
    float: right;
    background-color: black;
    border: none;
    color: black;
    margin-right: 130px;
    margin-top: 40px;
   }
}

.mid {
  padding: 20px;
  height: 300px;
  .bianhao{
    display: flex;
    margin-bottom: 10px;
    line-height: 40px;
  }
 .el-input {
  margin-left: 10px;
  width: 400px;
 }
}
.el-input__inner{
  width: 430px;
}
.qing {
  color: #5f84ff;
}
.el-icon-tickets{
    color: #5f84ff;
}
.pei {
  display: flex;
  line-height: 40px;
  span {
    width: 100px;
  }
  .el-input__inner{
    width: 100%;
   
  }
}
 .pei{
   position: relative;
   .right{
    width: 40px;
    height: 40px;
    .top{
      border: 1px solid #e1e5ea;
      text-align: center;
      line-height: 20px;
      height: 20px;
      background-color: #f8fafd;
    }
    .down{
      height: 20px;
      text-align: center;
      line-height: 20px;
       border: 1px solid #e1e5ea;
        background-color: #f8fafd;
    }
   }
 }

 .zhongjian {
  .mid {
    .mid1{
      display: flex;
      margin-bottom: 20px;
        .lfet{
          .s1{
            margin-right: 20px;
           }
        }
        .right{
        margin-left: 100px;
        }
    }
  }
     .top{
        height: 50px;
       line-height: 50px;
        background-color: #f8f8f8;
        width: 500px;
        margin: 0 auto;


        .tu{
          position: relative;
         
          line-height: 50px;
            .you {
              position: absolute;
              right: 10px;
               top: -15px;
              height: 50px;
            }
                 img {
          margin-top: 13px;
          margin-left: 15px;
          margin-right: 15px;
        }
        span {
          bottom: -50px;
          position: absolute;
        margin-bottom: 50px;
        }
        }
      
     }
 }
  
 
 ::v-deep .el-dialog__wrapper {

 
  
 
 .el-dialog__footer{
  text-align: center;
 }
 }
 .el-dialog {
      .quyu{
  display: flex;
  line-height: 40px;
  margin-bottom: 20px;
  .el-input {
    width: 80%;
    margin-left: 20px;
  }
 }

  .beizhu{
  display: flex;
  line-height: 40px;
  .el-input {
    width: 80%;
    margin-left: 20px;
  }
 }
  }
  .dianwei {
    display: flex;
    line-height: 40px;
    margin-top: 15px;
  .tablewraper{
    width: 369px;
    height: 40px;
    background-color: #f3f6fb;
    margin-left: 15px;
  }
  }
.cell{
  .shanshan{
    color: red;
    margin-left: 5px;
  }
}
 ::v-deep .el-dialog{
  .el-select{
    width: 100%;
  }
  .el-cascader{
    width: 100%;
  }
  .el-form-item__content{
    margin-left: 2px;
  }
}

</style>
